import React,{Component} from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import debounce from 'lodash/debounce';
import Velocity from 'velocity-animate';
import './list.less';
const prefix = "list";
/**
 * *****tab切换组件
 * 说明：该组件支持自定义TabPanel内容设置，参考source，也可以使用默认样式，参考/system界面。
 * @param title：内容区域标题栏的显示
 * @param list:Tab标签内承载的数据
 * @param listContent:TabPanel默认数据
 * @param Source:自定义组件承载容器
 */
class List extends Component{
    constructor(props) {
        super(props);
        this.state={
            marginTop:0,
            scrollTop:0,
            scroll:0
        }
    };
    handleClick = () => {
        /*
            **this.content是pc端容器元素，通过判断它的有无来决定scroll事件是否执行。组件卸载时采用removeEventListener并不起作用。
         */
        if(this.content) {
            let props = this.props;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            let select = document.querySelector('div.react-tabs__tab-panel--selected');
            let length = props.list.length;
            let judgment = select ? ((select.offsetHeight - 70 * length) > 0 ? (select.offsetHeight - 70 * length) : 0) : null;//判断菜单栏滚动的最大距离
            this.setState((prevState) => ({
                marginTop: scrollTop > 300 ? (scrollTop - 220) : 0,  //尽量使菜单一直在页面中间显示
                scroll: scrollTop - prevState.marginTop
            }), () => {
                let state = this.state;
                Velocity(document.getElementById("tableList"), {marginTop: (state.marginTop < judgment ? (state.marginTop) : judgment)}, {
                    duration: 500
                })
            })
        }
    };
    scrollTop = () =>{
        Velocity(document.body,"scroll",{duration:0})
    };
    componentDidMount() {
        window.addEventListener('scroll', debounce(this.handleClick,200 ));
    };
    componentWillUnmount(){
        window.removeEventListener('scroll', debounce(this.handleClick,200 ));
    };
    render(){
        let props = this.props;
        let listSource = props.list.map((value,index)=>{
            if(value.en){
                return(
                    <Tab key={index} className={prefix+"-list-children"}>
                        <p>{value.zh}</p>
                        <p>{value.en}</p>
                    </Tab>
                )
            }else{
                return(
                    <Tab key={index} className={prefix+"-list-children"}>
                        <p style={{lineHeight:"48px"}}>{value.zh}</p>
                    </Tab>
                )
            }
        });
        let listContent = props.listContent?props.listContent.map((value,index)=>{
            if(value.content instanceof Object){
                let contentBlock = value.content.map((value,index)=>{
                    return(
                        <p key={index}>{value.contentBlock}</p>
                    )
                })
                return(
                    <TabPanel className={prefix+'-float'} key={index}>
                        {contentBlock}
                        <img src={value.src} alt=""/>
                    </TabPanel>
                )
            }else{
                return(
                    <TabPanel className={prefix+'-float'} key={index}>
                        <p>{value.content}</p>
                        <img src={value.src} alt=""/>
                    </TabPanel>
                )
            }
        }):null;
        let source = props.Source?props.Source.map((value,index)=>{
            return(
                <TabPanel className={prefix+'-float'} key={index}>
                    {value}
                </TabPanel>
            )
        }):null;
        let query = window.location.search.match(/page=\d+/g);
        let pageIndex = query?parseInt(query[0].replace("page=",""),10):0;
        let tableListStyle = props.listPosition==="left"?{
            float:"left",
            marginRight:"30px"
        }:{
            float:"right",
            marginLeft:"20px"
        };
        return(
            <div className={classNames(prefix,"clearfix")} ref={(content) => {this.content = content}}>
                <div className={prefix+"-title"}>{props.title}</div>
                <Tabs className={prefix+"-content clearfix"} defaultIndex={pageIndex} onSelect = {this.scrollTop}>
                    <TabList className={prefix+"-system-list"} id="tableList" style={tableListStyle}>
                        {listSource}
                    </TabList>
                    {listContent?listContent:source}
                </Tabs>
            </div>
        )
    }
};
export default List;
List.propTypes = {
    title:PropTypes.string,
    list:PropTypes.array.isRequired,
    listPosition:PropTypes.oneOf(["right","left"]).isRequired,
    listContent:PropTypes.array,
    Source:PropTypes.array
}